<template>
  <el-dialog title="填写物流信息" :visible.sync="editDialog" :before-close= "handleClose" size="tiny">
    <el-form
      v-bind="getFormProps({labelWidth:'120px'})"
      ref="form"
      :model="form"
      class="sendedit-form">
      <el-form-item
        label="快递公司"
        prop="companyCode"
        :rules="[{ required: true, message: '请选择快递公司'}]">
        <el-select v-model="form.companyCode" placeholder="请选择快递公司">
          <el-option
            v-for="item in companyList"
            :key="item.fieldValue"
            :label="item.fieldName"
            :value="item.fieldValue"
            placeholder="请选择一个快递公司">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="运单号"
        prop="logisticsNo"
        :rules="[
          {required: true, message: '运单号不能为空'},
          {min: 10, message: '请输入10位以上字符'},
          validator.rule.letterNumber
        ]">
        <el-input type="text" placeholder="请在发货之后输入快递公司的运单号" v-model="form.logisticsNo">
        </el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" native-type="submit" :loading="loading" @click="submit">确定提交</el-button>
    </div>
  </el-dialog>
</template>
<script>
  import {form} from 'utils/mixins' // 引入form mixin
  import api from 'api/express'
  import validator from 'utils/validator'
  export default{
    mixins: [form],
    props: {
      editDialog: {},
      data: {},
      companyList: Array,
      successCall: Function
    },
    data () {
      return {
        validator,
        loading: false,
        form: {
          companyCode: this.data.companyCode || '',
          logisticsNo: this.data.logisticsNo || ''
        }
      }
    },
    watch: {
      data () {
        if (this.data && (this.data.companyCode === '' || !this.data.companyCode)) {
          this.$refs['form'].resetFields()
        } else {
          this.form = {
            companyCode: this.data.companyCode || '',
            logisticsNo: this.data.logisticsNo || ''
          }
        }
      }
    },
    methods: {
      handleClose () { // 关闭弹出层
        this.form = {
          companyCode: '',
          logisticsNo: ''
        }
        this.$emit('update:editDialog', false)
      },
      submit () {
        this.$refs.form.validate((valid) => {
          if (valid) {
            let orderDetailIds = []
            this.data.goodsList.forEach(item => {
              orderDetailIds.push(item.id)
            })
            api.send_edit({
              orderDetailIds: orderDetailIds,
              companyCode: this.form.companyCode,
              logisticsNo: this.form.logisticsNo
            }, {context: this, successMsg: '物流信息填写成功！'}).then((json) => {
              this.handleClose()
            })
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  .sendedit-form{
    .el-form-item__content > .el-input, .el-form-item__content > .el-cascader, .el-form-item__content > .el-select {
      width: 100%;
      max-width: 300px;
    }
    .el-form-item__content > .el-input, .el-form-item__content > .el-cascader, .el-form-item__content > .el-select {
      width: 100%;
      max-width: 300px;
    }
  }
</style>
